<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" media="all">
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/base64/base64.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">

function ajax(msg) {
	var event = document.createEvent('MessageEvent');
	var origin = window.location.protocol + '//' + window.location.host;
	event.initMessageEvent('MessageReceived', true, true, msg, origin, 1234, window, null);
	document.dispatchEvent(event);
}
// 全局接收消息事件
function messageReceived(res) {
	res = Base64.decode(res);
	res = JSON.parse(res);

	//标签搜索
	if (res.type == "Tags/List") {
		TagsList(res.data);
	}
	else if(res.type == "Tags/Info")
	{
		TagsInfo(res.data)
	}
}

function TagsInfo(data)
{
	var arr = data.split(',');
	for (var index in arr){
		if(arr[index].length == 0) continue;
	       $.each($('input:checkbox'),function(){
          		if($(this).val() == arr[index])
          		{
          			$(this).attr("checked", 'checked');//or
          		}
            });
	}

}

function TagsList(data)
{
	if (data.length != 0) {
		var html = '';
		var result_count = 0;


		for (var i in data) {
			var item = data[i];
			html += '<tr>';
	      	html += '<td><input type="checkbox"  value="' + item['name'] + '" name="layTableCheckbox" lay-skin="primary"></td>';
	      	html += '<td>' + item['name'] + '</td>';
	    	html += '</tr>';
		}

		$("#result").html(html);
	}
	else
	{

	}
}


</script>
<style type="text/css">
body{ padding: 10px; }
</style>
</head>
<body>
<table class="layui-table" lay-filter="demo">
  <thead>
    <tr>
      <th>选择</th>
      <th>标签名称</th>
    </tr>
  </thead>
    <tbody id="result">
	</tbody>
</table>
<div style="clear: both; padding-top: 10px; padding-bottom: 10px;"><button id="Btn" class="layui-btn layui-btn-fluid">确定</button></div>

<script>
		/*获取选中的id值*/
		$("#Btn").click(function(){
			var tags = "";
			var join = ",";
          	$.each($('input:checkbox:checked'),function(){
          		tags += join +  $(this).val() + ",";
          		join = "";
            });

			var data_opt = {
				type: "Tags/Add",
				data: {
					tags : tags,
				}
			}
			data_opt = JSON.stringify(data_opt);
			ajax(data_opt);

		});
</script>

</body>
</html>
